<template>
	<view>
		<view class="cu-modal " :class="isShowScanModel?'show':''">
			<view class="cu-dialog ls-main">
				<view class="cu-bar bg-ls justify-between">
					<view class="action">
						<view class="cuIcon-info text-white" v-show="false"></view>
					</view>
					<view class="content text-white">选择商品</view>
					<view class="action" @tap="hideGoodModal">
						<text class="cuIcon-close text-white"></text>
					</view>
				</view>
				<view class="padding text-left bg-white ls-contain" style="height: 100%;">
					<scroll-view scroll-y style="height: calc(100% - 1px);">
						<view class="Good_list" v-for="(item,index) in Good" @tap="checkd(index)" :key='index'  :class="isShowScanModel?'Animation_Good':''">
							<view class="Good_image">
								<img style="width: 100%;height: 100%;border-radius: 50%;"
								 :src="item.Goods_Image_Path1 != '' 
								 &&item.Goods_Image_Path1 != undefined ?'http://192.168.1.51:9000/picture'+item.Goods_Image_Path1:'../../static/image/unUplad.png'" alt="">
							</view>
							<view class="Good_title">
								<view class="Good_content">{{item.GoodsName}}</view>
								<view class="Good_subhead">{{item.BarCode}}</view>
							</view>
							<view class="Good_edit">
								<img src="../../static/image/arrowright.png" alt="">
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShowScanModel:null
			}
		},
		props:['Good'],
		methods: {
			hideGoodModal(){
				this.isShowScanModel = null
			},
			//点击了商品
			checkd:function(index){
				console.log('这是一个索引')
				console.log(index)
				this.$emit("confirm",{index})
				this.isShowScanModel = null
			},
			open(){
				this.isShowScanModel = 'show'
			}
		}
	}
</script>

<style>
	/* 选择商品HOME */
	.Good_list{
		height: 50px;
		width: 100%;
		border-radius: 5px;
		background-color: #fff;
		line-height: 50px;
		color: #000;
		/* padding: 5px 0; */
		margin: 5px 0;
		/* box-shadow: 0 7px 14px 0 rgba(59, 65, 94, 0.1), 0 3px 6px 0 rgba(0, 0, 0, 0.07); */
		box-shadow: 0 2px 15px 0 rgba(59, 65, 94, 0.1), 0 3px 1px 0 rgba(0, 0, 0, 0.07);
		/* border: 1px solid #07C160; */
		/* text-align: center; */
	}
	.Good_image{
		width: 40px;
		height: 40px;
		background-color: #0077AA;
		float: left;
		border-radius: 50%;
		margin: 5px;
	}
	/* 商品标题 */
	.Good_title{
		float: left;
		height: 50px;
		padding-left: 4px;
		line-height: 14px;
	}
	/* 商品编辑按钮 */
	.Good_edit{
		float: right;
		height: 24px;
		width: 30px;
		line-height: 26px;
		margin: 13px 5px;
		border-radius: 3px;
		color: #FFFDEF;
		padding: 0 3px;
		/* background-color: #007AFF; */
		/* padding-right: 12px; */
	}
	.Good_edit>img{
		width: 100%;
		height: 100%;
		
	}
	.Good_content{
		line-height: 25px;font-size: 14px;margin-top: 5px;
	}
	.Good_subhead{
		color: #8b8282;
	}
	.Animation_Good{
		animation: myfirst 0.8s;
		overflow: hidden;
	}
	@keyframes myfirst{
		from{
			height: 0px;
			/* width:0px; */
			/* transform:translateX(-150px); */
			}
		to{
			/* width:100%; */
			height: 50px;
			/* transform:translateX(0); */
			}
	}
	.cu-item{
		padding: 0;
	}
	.ls-main {
		max-height: 70%;
		background-color: #EDF2F9;
	}
	.bg-ls {
		position: fixed;
		width: inherit;
		height: 40px;
		z-index: 100;
		border-radius:6px 6px 0 0;
		background-image: linear-gradient(-45deg, #0443a2, #009bde);
	}
	.ls-contain {
		padding-top: 50px;
		height: inherit;
		background-color: #EDF2F9;
		padding: 50px 15px 5px 15px;
	}
	.cu-dialog{
		height: 70%;
		border-radius: 6px;
	}
	/* 选择商品E ND */
</style>
